<template>
  <div class="login-container">
    <div class="left-container flex-center">
      <i>众联</i>
    </div>
    <div class="right-container flex-center">
      <el-card class="login-card">
        <el-form ref="ruleFormRef" :rules="rules" :model="loginData">
          <el-form-item prop="username">
            <el-input
              v-model="loginData.username"
              placeholder="请输入用户名"
              size="large"
              clearable
            />
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              v-model="loginData.password"
              type="password"
              show-password
              clearable
              size="large"
              placeholder="请输入密码"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              :loading="loading"
              class="login-btn"
              @click="handleLogin"
            >
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import router from "../../router";
import { login } from "../../api/ce";
import type { FormInstance, FormRules } from "element-plus";

// Reactive states
const loading = ref(false); // 按钮loading

const loginData = ref<any>({
  username: "admin",
  password: "123456",
});
const ruleFormRef = ref<FormInstance>();
// 表单规则
const rules = reactive<FormRules<any>>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

// 登录
function handleLogin() {
  loading.value = true;
  ruleFormRef.value?.validate((valid) => {
    if (valid) {
      console.log("submit!");
      login(loginData.value)
        .then((res:any) => {
          console.log(res.data);
          localStorage.setItem("token", res.data.token);
          router.push({ path: "/department", query: {} });
        })
        .catch((err) => {
          console.log(err);
        })
        .finally(() => {
          loading.value = false;
        });
    } else {
      console.log("error submit!");
      return false;
    }
  });
}

// onMounted(() => {
// })
</script>

<style lang="less" scoped>
.login-container {
  display: flex;
  height: calc(100vh - 20px);
  .left-container {
    width: 50%;
    background-color: #409eff;
    font-size: 80px;
    text-shadow: 10px;
    color: #ffffff;
  }
  .right-container {
    width: 50%;
    background-color: rgba(250, 255, 255, 1);
    .login-card {
      width: 400px;
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
